<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Vertical Align</title>

<link rel="stylesheet" media="all" href="../css/style.css">
<link rel="stylesheet" media="all" href="../script/libs/jquery-ui/themes/base/jquery.ui.all.css" />
<script src="../script/libs/modernizr-2.0.6.min.js"></script>

<style>
.hidden {
    display: none;
}

.clearfix {
    clear: both;
}

nav ul {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.tooltip-content {
    background-color: white;
    border: 2px solid #767676;
    border: 2px solid rgba(84,84,84,0.8); /* #545454 with 80% transparency */
    width: 204px;
    height: 261px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;

    -moz-background-clip: padding;     /* Firefox 3.6 */
    -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
    background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

.photo-large {
    vertical-align: middle;
    width: 100%;
    height: 150px;
}
</style>
</head>
<body>
  <header>
    <h1 style="float: left">Vertical align in a table cell</h1>
    <div class="clearfix"></div>
  </header>

  <nav id="navigation">
    <ul>
      <li id="version">Unknown jQuery Version</li>
      <li id="ui-version">Unknown jQuery UI Version</li>
    </ul>
  </nav>

  <div id="main" role="main">
    <p>God helps those who help themselves.</p>
    <div id="toolbar">
      <a href="http://phrogz.net/css/vertical-align/index.html">http://phrogz.net/css/vertical-align/index.html</a>
    </div>
    <div id="content">
      <div id="container1" style="height: 30em; background-color: PaleGreen;">
        <div class="tooltip-content">
          <div class="photo-large" style="background-color: silver;">This is a photo</div>
        </div>
      </div>
      <div id="container2" style="height: 30em; background-color: SkyBlue;">
        <table style="width: 250px; height: 250px; border: 3px solid black;">
          <tbody>
            <tr>
              <td style="vertical-align: middle; background-color: silver;">This is a table cell</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <footer>
    <div>Copyright &copy; 2011. All rights reserved.</div>
  </footer>

  <script src="../script/libs/jquery-1.6.4.js"></script>
  <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"><\/script>')</script>
  <script src="../script/libs/jquery-ui-1.8.16.js"></script>
  <script>window.jQuery.ui || document.write('<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"><\/script>')</script>
  <script src="../script/libs/json2.js"></script>
  <script src="../script/libs/jsrender.js"></script>

  <!-- scripts concatenated and minified via ant build script-->
  <script src="../script/console.js"></script>
  <script defer src="../script/plugins.js"></script>
  <!-- end scripts-->

  <script>

  </script>
  <script>
    $(document).ready(function() {
        // version
        var version = $.fn.jquery;
        $('#version').html('jQuery: ' + version);
        var uiVersion = $.ui.version;
        $('#ui-version').html('jQuery UI: ' + uiVersion);
    });
  </script>
</body>
</html>